<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link href="shadow_effect.css" rel="stylesheet" type="text/css" media="screen"/>
  <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="scripts/jquery-ui-1.7.1.custom.min.js"></script>
  <script type="text/javascript" src="scripts/shadow_effect.js"></script>
  <title>Realistic Shadow Effect On Mouse Hover</title>
</head>
<body>
  <h1>Realistic Shadow Effect</h1>
  <!-- REALISTIC SHADOW EFFECT ON MOUSE HOVER-->
  <div id="main_wrapper">
    <div class="box_wrapper">
      <a class="box1" href="#"></a>
    </div>
    <div class="box_wrapper">
      <a class="box2" href="#"></a>
    </div>
    <div class="box_wrapper">
      <a class="box3" href="#"></a>
    </div>
    <div class="box_wrapper">
      <a class="box4" href="#"></a>
    </div>
    <div class="box_wrapper">
      <a class="box5" href="#"></a>
    </div>
    <div style="clear: both;"></div>
    <div class="box_wrapper">
      <a class="box1" href="#"></a>
    </div>
    <div class="box_wrapper">
      <a class="box2" href="#"></a>
    </div>
    <div class="box_wrapper">
      <a class="box3" href="#"></a>
    </div>
    <div class="box_wrapper">
      <a class="box4" href="#"></a>
    </div>
    <div class="box_wrapper">
      <a class="box5" href="#"></a>
    </div>
    <div style="clear: both;"></div>
  </div>
  <p>
    Read the full Article, <a href="#">here</a>.
  </p>
</body>
</html>